<style scoped lang="scss" >
    .dom{
        width: 100vw;
        height: 100vh;
        overflow-y: auto;
        position: relative;
        .content{
            position: absolute;
            left: 0;
            top: 0;
            width: 100vw;
        }
    }
</style>
<template>
    <div class="dom" @scroll="scroll">
        <div class="plant" :style="{height:config.totalHeight + 'px'}" ></div>
        <div class="content" :style="{transform:`translateY(${scrollTopRef}px)`}">
            <div v-for="item in renderData" :key="item.id" class="item" :style="{height:itemHeight + 'px',borderBottom:'1px solid #ccc'}">
                {{ item.id }}
            </div>
        </div>
    </div>
</template>
<script setup lang="ts" >
import { computed, onMounted, reactive, ref } from 'vue';

    const clientHeight = document.documentElement.clientHeight;
    const itemHeight=115
    const clientItemCount = Math.ceil(clientHeight / itemHeight);
    const sourceData = new Array(10000).fill(0).map((_,i)=>{
        return {id:i+1}
    })

    const renderData=computed(()=>{
        return sourceData.slice(config.startIndex,config.endIndex)
    })

    const config=reactive({
        startIndex:0,
        endIndex:0,
        totalHeight:0
    })

    const scrollTopRef=ref(0)

    const scroll=(e:any)=>{
       const scrollTop = e.target.scrollTop;
       config.startIndex = Math.floor(scrollTop / itemHeight);
       config.endIndex = config.startIndex + clientItemCount;
       scrollTopRef.value=config.startIndex*itemHeight
    }

    onMounted(()=>{
        // 总高度
        config.totalHeight=sourceData.length*itemHeight
        config.endIndex=config.startIndex+clientItemCount
    })
</script>